<template>
  <details-layout leftTitle="上网详情">
    <ul class="box">
      <cardBlock class="car-item test-card" :imgUrl="img ? `${BASE64_TYPE}${img}` : '/static/default/head.png'">
          <div slot="name" class="card-name">
            <strong class="name">{{traceData.detail.xm}}</strong>
          </div>
          <div slot="tags" class="card-tags">
            <!-- <span class="tag">团伙</span><span class="tag">布控</span> -->
          </div>
          <div class="info-grid" slot="data">
            <div class="grid-item align-left">
              <em>性别</em><span>{{traceData.detail.xb}}</span>
            </div>
            <div class="grid-item align-left">
              <em>身份证号</em><span style="color:#5077aa" v-init-tooltips="{
                  bsh: traceData.detail.sfzh,
                  bshlx: '001',
                  dalx: 'RY'
                }">{{traceData.detail.sfzh}}</span>
            </div>
            <div class="grid-item align-left">
              <em>上网时间</em><span>{{traceData.detail.kssj}}</span>
            </div>
            <div class="grid-item align-left">  
              <em>下网时间</em><span>{{traceData.detail.jssj}}</span>
            </div>
            <div class="grid-item align-left">  
              <em>网吧名称</em><span>{{traceData.detail.csmc}}</span>
            </div>
          </div>
      </cardBlock>
    </ul>
    <details-group title="以下是同上网人员" :listLength="data.length">
      <ul>
        <cardBlock class="car-item test-card" :imgUrl="item.xp ? `${BASE64_TYPE}${item.xp}` : '/static/default/head.png'" v-for="(item,index) in data" :key="index">
          <div slot="name" class="card-name">
            <strong class="name">{{item.xm}}</strong>
          </div>
          <div slot="tags" class="card-tags">
            <span class="tag" v-for="(item1,index1) in item.bs" :key="index1">{{item1}}</span>
          </div>
          <div class="info-grid" slot="data">
            <div class="grid-item align-left">
              <em>性别</em><span>{{item.xb}}</span>
            </div>
            <div class="grid-item align-left">
              <em>身份证号</em><span style="color:#5077aa" v-init-tooltips="{
                  bsh: item.sfzh,
                  bshlx: '001',
                  dalx: 'RY'
                }">{{item.sfzh}}</span>
            </div>
            <div class="grid-item align-left">
              <em>上网时间</em><span>{{item.swsj}}</span>
            </div>
            <div class="grid-item align-left">  
              <em>下网时间</em><span>{{item.xwsj}}</span>
            </div>
            <div class="grid-item align-left">  
              <em>网吧名称</em><span>{{traceData.detail.csmc}}</span>
            </div>
          </div>
      </cardBlock>
    </ul>
    </details-group>
  </details-layout>
</template>

<script>
  import detailsLayout from '../../components/details-layout'
  import detailsGroup from '../../components/details-group'
  import cardBlock from '../../components/card-block'
  import { mapState } from 'vuex'
  import request from '../../helper/request'
  
  export default {
    data() {
      return {
        data: []
      }
    },
    computed: {
      ...mapState('personStore', {
        traceData: 'traceData',
        name: 'name',
        img: 'img'
      })
    },
    methods: {
      async getData() {
        let txjzq = await request('people/gj_tsw', 'SC040801', {sfzh: '000000', swsj: '20160103112200', xwsj: '20160103113200'})
        this.data = txjzq.tgxArr
      }
    },
    components: {
      detailsLayout,
      cardBlock,
      detailsGroup
    },
    created() {
      this.getData()
    }
}
</script>
<style lang="scss" scoped>
 @import "../../style/public";
 .box {
  margin: 1rem 0 0 1rem;
  background-color: #FBFBFB;
 }
</style>